<template>
  <AppPage :leftIcon="leftIcon" class="bg-[#f8f8f8]" article-class="" header-class="bg-[#3d8ffd] ">
    <template #center>
      <span class="c-white">{{ route.query.country_name }}签证</span>
    </template>
    <div class="relative flex">
      <img class="w-full" src="@/assets/images/page-home.png" alt="">
      <div class="absolute top-0 left-0 right-0 bottom-0 z-10 flex items-center justify-center">
        <div @click="openProvincePopup" class="inline-block border border-[#eee] border-solid rounded-20 line-height-36 h-36 px-20 text-center c-white flex items-center justify-center bg-[rgb(0,0,0,.5)]">
          长期居住地
          <span class="inline-block h-20 w-1 bg-white mx-12 "></span>
          <span class="mr-8">{{ selectedProvince }}</span>
          <RectDown />
        </div>
      </div>

    </div>
    <div class="relative top--3 rounded-l-6 rounded-r-6  border-b-1 border-[#eee]">
      <div class="pb-12 pt-20">
        <div class="px-15">
          <div v-for="(item,index) in productList" :key="index" class="mx-2 mb-16  px-10 py-8  bg-[#fff] rounded-4" @click="goVisaDetail(item,index)">
            <div class="flex justify-between mb-2">
              <div class="text-ellipsis pr-10 font-bold pl-5">{{ item.product_name }}</div>
            </div>
            <div class="flex justify-between items-center">
              <div class="text-13 c-coolGray">入境次数：{{ item.entry_count_unit }}</div>
              <!-- <div>签证类型：{{ visaType(item.visa_type_id) }} </div> -->
              <div class="white-space"><span class="text-14 c-red">￥</span><span class="text-20 c-red">{{ item.price }}</span> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AppPage>
  <province @confirmSelectVisa="confirmSelectVisa" v-model:selectedProvince="selectedProvince" ref="provincePopup" :provinceList="provinceList" />
</template>

<script setup>
import { onMounted, reactive, watch } from 'vue'
import { getVisaProvinceList, productBriefQuery } from '@/api/visa'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { visaType } from '@/utils/type/visa.js'
import province from './components/province.vue'
import { RectDown } from '@nutui/icons-vue';
import { isEmpty } from '@/utils'
import { getVisaProvince } from '@/utils/storage/common.js'

const route = useRoute()
const router = useRouter()
let selectedProvince = ref('')
let provinceList = ref([])
const leftIcon = reactive({ path: 'home' })
const getProvinceListFun = async () => {
  const result = await getVisaProvinceList()
  provinceList.value = result.data
}

let productList = ref([])
const getProductListFun = async (provinceCode) => {
  let params = {
    country_name: route.query.country_name,
    province_code: provinceCode
  }
  const result = await productBriefQuery(params)
  if (+result.code === 200) {
    productList.value = result.data.data
  }
}
const confirmSelectVisa = async (item) => {
  let provinceCode = item.key
  getProductListFun(provinceCode)
}
const goVisaDetail = async (item) => {
  router.push({ path: '/visaDetail', query: { product_id: item.product_id, country_name: route.query.country_name, selectedProvince: selectedProvince.value } })
}
const provincePopup = ref('')
const openProvincePopup = () => {
  provincePopup.value.open()
}

onMounted(async () => {
  getProvinceListFun()
  let provinceCode = getVisaProvince() && getVisaProvince().key
  if (isEmpty(provinceCode)) {
    openProvincePopup()
    return
  }
  selectedProvince.value = getVisaProvince().value
  getProductListFun(provinceCode)
})
</script>
<style>
:root {
  --nut-grid-item-text-color: black;
  --nut-grid-item-text-font-size: 14px;
}
.input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.city {
  line-height: 32px;
  border: 1px solid #ddd;
}
.city.active {
  line-height: 32px;
  border: 1px solid #f00;
}
</style>